<template>
	<view class="popup" @click="popupClick" v-if="showPopup">
		<view class="bg-content" data-class="bg-content">

		</view>
		<view class="popup-content" data-class="popup-content" :style="{height:height}">
			<slot></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	const emits = defineEmits(['close'])
	const props = defineProps({
		height: {
			type: String,
			default: '300rpx'
		},
		isShowPopup: {
			type: Boolean,
			default: true
		},
	})

	const showPopup = computed(() => { return props.isShowPopup })

	function popupClick(e) {
		if (e.target.dataset.class == 'bg-content') {
			emits('close')
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;

		.bg-content {
			width: 100%;
			height: 100%;

		}

		.popup-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			background-color: #fff;
		}
	}
</style>